<template>
  <div class="wrapper">
    <!-- <div class="project-icon"><i class="iconfont icon-xiangmu1"></i></div> -->
    <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="(bread, index) in breads" :key="index">
        <span
          class="bread-item"
          v-if="index === 0"
          @click="handleBreadClick(index)"
        >
          <i class="iconfont icon-xiangmu1"></i>
          {{ bread }}
        </span>
        <span class="bread-item" v-else @click="handleBreadClick(index)">
          {{ bread }}
        </span>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: "breadcrumb",
  props: {
    breads: {
      type: Array,
      // required: true,
    },
  },
  methods: {
    handleBreadClick(index) {
      this.$emit("changeBreadArr", index);
    },
  },
};
</script>

<style scoped>
.wrapper {
  width: 100%;
  height: 30px;
  border-bottom: 1px solid #ddd;
}

.breadcrumb {
  height: 100%;
  line-height: 30px;
  padding: 0 10px;
  box-sizing: border-box;
}

.bread-item {
  line-height: 30px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}
.bread-item:hover {
  background-color: #dddddd;
}
.el-breadcrumb__item:nth-last-of-type(1) .bread-item {
  cursor: not-allowed;
}
.el-breadcrumb__item:nth-last-of-type(1) .bread-item:hover {
  background-color: transparent;
}
</style>
